<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .table {
            table-layout: fixed;
            width: 50%;
            border-collapse: collapse;
        }

        .table thead th {
            width: 20%;
            border: 1px solid black;
        }

        .table tbody td {
            border: 1px solid black;
        }

        .table-sheji {
            width: 50%;
            border: 1px black solid;
            border-collapse: collapse;
        }

        .table-sheji :is(th:nth-child(odd),td:nth-child(odd)) {
            background-color: skyblue;
        }

        .table-sheji :is(th,td) {
            border: 1px black solid;
            padding: 10px;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <!--默认样式-->
    <table>
      <caption>表格标题</caption>
      <thead>
        <tr>
          <th scope="col">学号</th>
          <th scope="col">姓名</th>
          <th scope="col">性别</th>
          <th scope="col">年龄</th>
          <th scope="col">地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>孙悟空</td>
          <td>男</td>
          <td>18</td>
          <td>花果山</td>
        </tr>
        <tr>
          <td>2</td>
          <td>猪八戒</td>
          <td>男</td>
          <td>28</td>
          <td>高老庄</td>
        </tr>
        <tr>
          <td>3</td>
          <td>沙和尚</td>
          <td>男</td>
          <td>38</td>
          <td>流沙河</td>
        </tr>
        <tr>
          <td>4</td>
          <td>唐僧</td>
          <td>男</td>
          <td>16</td>
          <td>女儿国</td>
        </tr>
      </tbody>
    </table>

    <!--默认情况下表格的尺寸根据所包含的内容大小而变化，`table-layout: fixed`设置后可根据列标题的宽度来规定列的宽度-->
    <!--在表格元素上设置`border`属性时默认会存在间隔，而通过`border-collapse`属性可以让边框合为一条-->
    <table class="table">
      <caption>表格标题</caption>
      <thead>
        <tr>
          <th scope="col">学号</th>
          <th scope="col">姓名</th>
          <th scope="col">性别</th>
          <th scope="col">年龄</th>
          <th scope="col">地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>孙悟空</td>
          <td>男</td>
          <td>18</td>
          <td>花果山</td>
        </tr>
        <tr>
          <td>2</td>
          <td>猪八戒</td>
          <td>男</td>
          <td>28</td>
          <td>高老庄</td>
        </tr>
        <tr>
          <td>3</td>
          <td>沙和尚</td>
          <td>男</td>
          <td>38</td>
          <td>流沙河</td>
        </tr>
        <tr>
          <td>4</td>
          <td>唐僧</td>
          <td>男</td>
          <td>16</td>
          <td>女儿国</td>
        </tr>
      </tbody>
    </table>
    <br>
    <table class="table-sheji">
      <caption>表格标题</caption>
      <thead>
        <tr>
          <th scope="col">学号</th>
          <th scope="col">姓名</th>
          <th scope="col">性别</th>
          <th scope="col">年龄</th>
          <th scope="col">地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>孙悟空</td>
          <td>男</td>
          <td>18</td>
          <td>花果山</td>
        </tr>
        <tr>
          <td>2</td>
          <td>猪八戒</td>
          <td>男</td>
          <td>28</td>
          <td>高老庄</td>
        </tr>
        <tr>
          <td>3</td>
          <td>沙和尚</td>
          <td>男</td>
          <td>38</td>
          <td>流沙河</td>
        </tr>
        <tr>
          <td>4</td>
          <td>唐僧</td>
          <td>男</td>
          <td>16</td>
          <td>女儿国</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>